<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据查询页面</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
    <script src="../js/week/dataSummary.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .warp {
            width: 815px;
            height: 100%;
            padding-top: 35px;
            box-sizing: border-box;
            margin: 0px auto 0;
            text-align: center;
            line-height: 45px;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .picDiv {
            width: 400px;
            height: 400px;
            float: left;
            border: 1px solid;
            border-radius: 50%;
            position: relative;
        }

        .picDiv p {
            width: 131px;
            height: 131px;
            float: left;
            position: absolute;
            font-size: 130px;
            line-height: 131px;
            cursor: pointer;
        }

        .picDiv p:first-child {
            top: 0px;
            left: 134px;
        }

        .picDiv p:nth-child(2) {
            top: 131px;
            left: 0px;
            transform: rotate(-115deg);
        }

        .picDiv p:nth-child(3) {
            top: 131px;
            right: 0px;
            transform: rotate(115deg);
        }

        .picDiv p:nth-child(4) {
            bottom: 40px;
            left: 110px;
            width: 0;
            height: 0;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            border-bottom: 100px solid black;
        }

        .picDiv p:last-child {
            bottom: 40px;
            right: 110px;
            width: 0;
            height: 0;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            border-bottom: 100px solid black;
        }

        .right {
            width: 400px;
            float: right;
            text-align: center;
        }

        .right > div {
            width: 385px;
            height: 45px;
            margin: 15px 10px;
            cursor: pointer;
            position: relative;
        }

        .right > div:first-child, .right > div:nth-child(2) {
            border: 1px solid;
            position: relative;
        }

        .right > div > div {
            width: 47%;
            height: 100%;
            border: 1px solid red;
            float: right;
            position: relative;
        }

        .right > div > div:first-child {
            float: left;
        }

        .detailedInfo {
            width: 100%;
            background: #fff;
        }

        .title {
            line-height: 50px;
            text-align: center;
        }

        .layui-layer-page {
            top: 0px !important;
        }
        .detailedInfoTable {
            padding: 0 10px;
            box-sizing: border-box;
        }
        .detailedInfoTable table {
            width: 100%;
        }

        .detailedInfoTable table td {
            text-align: center;
            line-height: 35px;
            padding: 0 3px;
            box-sizing: border-box;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="warp">
    <div class="picDiv">
        <p onclick="dataClick('吸收塔侧搅拌器B','Absorber_agitator_B',2)" onmouseover="dataOver('吸收塔侧搅拌器B','Absorber_agitator_B',2)">⬇</p>
        <p onclick="dataClick('吸收塔侧搅拌器A','Absorber_agitator_A',2)" onmouseover="dataOver('吸收塔侧搅拌器A','Absorber_agitator_A',2)">⬇</p>
        <p onclick="dataClick('吸收塔侧搅拌器C','Absorber_agitator_C',2)"  onmouseover="dataOver('吸收塔侧搅拌器C','Absorber_agitator_C',2)">⬇</p>
        <p onclick="dataClick('石膏排出泵A','Gypsum_discharge_pump_A',2)" onmouseover="dataOver('石膏排出泵A','Gypsum_discharge_pump_A',2)"></p>
        <p onclick="dataClick('石膏排出泵B','Gypsum_discharge_pump_B',2)" onmouseover="dataOver('石膏排出泵B','Gypsum_discharge_pump_B',2)"></p>
    </div>
    <div class="right">
        <div onclick="dataClick('氧化风机A','Oxidation_fan_A',2)" onmouseover="dataOver('氧化风机A','Oxidation_fan_A',2)">氧化风机A</div>
        <div onclick="dataClick('氧化风机B','Oxidation_fan_B',2)" onmouseover="dataOver('氧化风机B','Oxidation_fan_B',2)">氧化风机B</div>
        <div>
            <div onclick="dataClick('循环泵D马达保护器','D',0)" onmouseover="dataOver('循环泵D马达保护器','D',0)">循环泵D马达保护器</div>
            <div onclick="dataClick('循环泵D变频器','D',1)" onmouseover="dataOver('循环泵D变频器','D',1)">循环泵D变频器</div>
        </div>
        <div>
            <div onclick="dataClick('循环泵C马达保护器','C',0)" onmouseover="dataOver('循环泵C马达保护器','C',0)">循环泵C马达保护器</div>
            <div onclick="dataClick('循环泵C变频器','C',1)" onmouseover="dataOver('循环泵C变频器','C',1)">循环泵C变频器</div>
        </div>
        <div>
            <div onclick="dataClick('循环泵B马达保护器','B',0)" onmouseover="dataOver('循环泵B马达保护器','B',0)">循环泵B马达保护器</div>
            <div onclick="dataClick('循环泵B变频器','B',1)" onmouseover="dataOver('循环泵B变频器','B',1)">循环泵B变频器</div>
        </div>
        <div>
            <div onclick="dataClick('循环泵A马达保护器','A',0)" onmouseover="dataOver('循环泵A马达保护器','A',0)">循环泵A马达保护器</div>
            <div onclick="dataClick('循环泵A变频器','A',1)" onmouseover="dataOver('循环泵A变频器','A',1)">循环泵A变频器</div>
        </div>
    </div>
</div>
<div class="detailedInfo">
    <h1 class="title"></h1>
    <div class="detailedInfoTable"></div>
</div>
</body>
</html>
